<template>
  <div>
    <!--    <div class="table-page-search-wrapper">-->
    <!--      <a-form-model :model="queryParam" layout="inline">-->
    <!--        <a-row :gutter="48">-->
    <!--          <a-col :md="6" :sm="24">-->
    <!--            <a-form-model-item label="通讯账号">-->
    <!--              <a-select-->
    <!--                v-model="queryParam['filter[adviser_nanfang_accounts]']"-->
    <!--                placeholder="选择通讯账号"-->
    <!--              >-->
    <!--                <a-select-option v-for="(item,index) in accountOpts" :key="item" :value="item">{{index}}</a-select-option>-->
    <!--              </a-select>-->
    <!--            </a-form-model-item>-->
    <!--          </a-col>-->
    <!--          <a-col :md="6" :sm="24">-->
    <!--            <a-form-model-item label="通话时长">-->
    <!--              <a-select v-model="queryParam['filter[nanfang_section]']" placeholder="选择对应的通时区间">-->
    <!--                <a-select-option v-for="(item,index) in sectionOpts" :key="index" :value="index">{{item}}</a-select-option>-->
    <!--              </a-select>-->
    <!--            </a-form-model-item>-->
    <!--          </a-col>-->
    <!--          <a-col :md="6" :sm="24">-->
    <!--            <a-form-model-item label="通话时间">-->
    <!--              <a-date-picker style="width: 100%" v-model="queryParam['filter[api_call_time]']" @change="onChange" />-->
    <!--            </a-form-model-item>-->
    <!--          </a-col>-->
    <!--          <a-col :md="6" :sm="24">-->
    <!--            <a-button type="primary" @click="$refs.table.refresh(true)" style="margin-right:10px;">查询</a-button>-->
    <!--            <a-button type="default" @click="resetSearch">重置</a-button>-->
    <!--          </a-col>-->
    <!--        </a-row>-->
    <!--      </a-form-model>-->
    <!--    </div>-->
    <s-table
      bordered
      ref="table"
      :row-key="(record) => record.id"
      :columns="callColumns"
      :data="nfData"
    >
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`搜索${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterSelect"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          show-search
          style="width: 188px; margin-bottom: 8px; display: block;"
          :placeholder="`选择${column.title}`"
          :value="selectedKeys[0]"
          :filter-option="filterOption"
          @change="(value) => setSelectedKeys(value ? [value] : [])"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          <a-select-option v-for="(item,index) in accountOpts" :key="item" :value="item">{{index}}</a-select-option>
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterRange"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-range-picker
          style="width: 228px; margin-bottom: 8px; display: block;"
          :value="createValue"
          @change="onChange0"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 110px; margin-right: 8px"
          @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
          重置
        </a-button>
      </div>
      <template slot="url" slot-scope="text, record">
        <audio v-if="record.duration != 0" :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
          您的浏览器不支持 audio 标签
        </audio>
        <div v-else>
          -
        </div>
        <!--        <audio :src="text" controls></audio>-->
      </template>
      <template slot="sign" slot-scope="text,record">
        <a-tag v-if="record.sign == 0">正常</a-tag>
        <a-tag color="red" v-else-if="record.sign == 1">异常</a-tag>
        <a-tag color="blue" v-else>优秀</a-tag>
      </template>
      <template slot="action" slot-scope="text,record">
        <a-button size="small" type="primary" @click="onSign(record.id)">操作</a-button>
      </template>
      <template slot="title">
        <div :style="{ overflow: 'hidden' }">
          <div :style="{ float: 'left' }">
            搜索结果总通时：<a-tag color="red">{{(totalZts/60).toFixed(2)}}</a-tag>分钟
          </div>
          <div :style="{ float: 'right' }">
            <a-button size="small" type="primary" @click="onExport">导出</a-button>
          </div>
        </div>
      </template>
    </s-table>
    <a-modal
      title="录音记录"
      v-model="visible"
      :footer="null"
    >
      <a-form-model
        ref="form"
        :model="signForm"
        :rules="signRules"
      >
        <a-form-model-item label="问题" prop="question">
          <a-input type="text" v-model="signForm.question" placeholder="输入问题是什么" />
        </a-form-model-item>
        <a-form-model-item label="解决方案" prop="proposal">
          <a-textarea :rows="5" v-model="signForm.proposal" placeholder="给出解决方案及建议"></a-textarea>
        </a-form-model-item>
        <a-form-model-item>
          <div :style="{ textAlign: 'right' }">
            <a-button type="danger" style="margin-right:10px" @click="signGood">优秀</a-button>
            <a-button type="primary" @click="onSubmit">提交</a-button>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import apis from '@/api'
import col from '@/columns/calls'
// import { getExtend, getNanfang, getSign, postExtend, postSign } from '@/api/calls'
import { getCallList, getExtend, signBad } from '@/api/calls'

export default {
  components: {
    STable
  },
  name: 'AxModal',
  data () {
    return {
      callColumns: col.nanfang,
      nfData: parameters => {
        return getCallList(Object.assign(parameters, this.queryParam)).then(res => {
          this.totalZts = res.result.axSearchZts
          this.accountOpts = res.result.ax_account
          this.sectionOpts = res.result.ax_section
          return res.result
        })
      },
      accountOpts: {},
      sectionOpts: {},
      queryParam: {},
      info: {},
      currentId: '',
      visible: false,
      signOpts: {},
      typeOpts: {},
      signForm: {
        question: '',
        proposal: ''
      },
      signRules: {
        question: [{ required: true, message: '请输入问题是什么', trigger: true }],
        proposal: [{ required: true, message: '请输入解决方案', trigger: true }]
      },
      totalZts: 0,
      createValue: []
    }
  },
  created () {
    this.queryParam['filter[type]'] = '4'
  },
  methods: {
    onChange (date, dateString) {
      this.queryParam['filter[api_call_time]'] = dateString
    },
    onChange0 (date, dateString) {
      this.createValue = date
      this.queryParam['filter[begin_created_at]'] = dateString[0]
      this.queryParam['filter[end_created_at]'] = dateString[1]
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    resetSearch () {
      this.queryParam = {}
      this.queryParam['filter[type]'] = '2'
      this.$refs.table.refresh(true)
    },
    onSign (id) {
      const app = this
      app.currentId = id
      getExtend(app.currentId, app.queryParam['filter[type]']).then(res => {
        app.signForm.question = res.result.question
        app.signForm.proposal = res.result.proposal
        app.visible = true
      })
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleReset (clearFilters, dataIndex) {
      clearFilters()
      delete this.queryParam['filter[' + dataIndex + ']']
    },
    handleSelect (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleRange (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.$refs.table.refresh(true)
    },
    rangeReset (clearFilters) {
      clearFilters()
      this.createValue = []
      delete this.queryParam['filter[begin_created_at]']
      delete this.queryParam['filter[end_created_at]']
      this.$refs.table.refresh(true)
    },
    onSubmit () {
      const app = this
      app.$refs.form.validate(valid => {
        if (valid) {
          const form = {}
          for (const k in app.signForm) {
            form['info[' + k + ']'] = app.signForm[k]
          }
          signBad(app.currentId, app.queryParam['filter[type]'], 'wt', form).then(res => {
            if (res.status === 0) {
              app.visible = false
              app.$refs.table.refresh()
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    },
    signGood () {
      const app = this
      this.$confirm({
        title: '是否确认此条设为优秀录音',
        onOk: () => {
          signBad(app.currentId, app.queryParam['filter[type]'], 'yx').then(res => {
            if (res.status === 0) {
              app.visible = false
              app.$refs.table.refresh()
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        }
      })
    },
    onExport () {
      const baseUrl = process.env.VUE_APP_API_BASE_URL + apis.ExportVoice
      const exp = baseUrl + '?filter[type]=' + this.queryParam['filter[type]'] + '&filter[api_call_time]=' + this.queryParam['filter[api_call_time]']
      window.open(exp)
    }
  }
}
</script>

<style>
.ant-table-tbody > tr.table-color-dust {
  background-color: #ffcccc;
}
</style>
